<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css" rel="stylesheet">
    <style>
        .el-header{
            background-image: url("catimg/bizhi10.jpg");
        }
        .el-header a{
            color: #666;
            text-decoration: none;
        }
        .el-menu.el-menu--horizontal{
            border-bottom: 0;
        }
        .el-table .el-table__cell{
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1200px;margin: 0 auto">
                <img style="vertical-align: middle" src="catimg/regcat.png" width="150" alt="">
                <a href="/">首页</a><el-divider direction="vertical"></el-divider>
                <a href="">喵课堂</a><el-divider direction="vertical"></el-divider>
                <a href="">好物安利</a><el-divider direction="vertical"></el-divider>
                <a href="">留言反馈</a><el-divider direction="vertical"></el-divider>
                <a href="">公告栏</a><el-divider direction="vertical"></el-divider>
                <a href="">帮助</a>
            </div>
            <!--导航菜单开始-->
            <div style="background-color: #f09117">
                <el-menu @select="handleSelect" style="width: 1200px;margin: 0 auto" mode="horizontal" background-color="#f09117"
                         text-color="#fff" active-text-color="#fff">
                    <el-menu-item v-for="c in arr" :index="c.id">{{c.name}}</el-menu-item>
                    <div style="float: right;position: relative;top: 10px">
                        <el-input type="text" @keydown.native.enter="search()" v-model="wd">
                            <!--在文本框中内嵌一个搜索按钮-->
                            <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu>
            </div>
            <!--导航菜单结束-->
        </el-header>
        <el-main>
            <el-card class="box-card" >
                <div style="width: 80%;margin:0 auto">
                    <el-timeline-item placement="top" timestamp="猫砂的选择">
                        <el-card>
                            <p>市场上的带砂大最可以分为些类土、木幕、豆南猫破、水昌管砂，各牌带砂都有各自的优缺点。 </p>
                            <p>所以对于不问的猫主人说 要根据自己的需求选择适合自己的猫砂。</p>
                        </el-card>
                        <!--                副公告-->
                        <el-timeline>
                            <el-timeline-item placement="top" timestamp="关于猫粮好坏的分析">
                                <el-card>
                                    <p>我建议每个铲屎官重点了解以下几个重要指标，记住现住，猫是食肉肉动物!!! </p>
                                    <p>别只看一些胡萝卜成分啊。南瓜成分啊,一定要仔细看!</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item placement="top" timestamp="产品页面显示在维护中，应该如何预订">
                                <el-card>
                                    <p>出现此类情况，可能是由于系统正在上传数据而造成的，建议您稍后再试，最长不超过24小时就会恢复。</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item placement="top" timestamp="街巷家的产品一般要提前多久预订">
                                <el-card>
                                    <p>请根据各产品的具体情况酌情预订，建议您提前1－2天预订</p>
                                </el-card>
                            </el-timeline-item>

                            <el-timeline-item placement="top" timestamp="如何预订产品">
                                <el-card>
                                    <p>门票类产品仅限二维码及手机客户端预订，不接受电话预订。具体请查看产品中的预订限制为准</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item placement="top" timestamp="线下猫咖体验怎么预订">
                                <el-card>
                                    <p>
                                        请在订单提交后与工作人员联系客人确认,以及相关报价,建议在预订时看下是否有限制疫情出行的相关限制
                                    </p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </el-timeline-item>
                </div>
            </el-card>
        </el-main>
        <el-footer>
            footer
        </el-footer>
    </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import element-ui -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr:[],
                title:{}
            }
        },
        methods: {
            handleSelect(key,keyPath){
                location.href="/result.html?id="+key;
            },
        },
        created:function () {
            //获取所以分类
            axios.get("/category/select").then(function (response) {
                v.arr=response.data;
            })
        }
    })
</script>
</html>